import { VuexModule, Module, Mutation, getModule } from 'vuex-module-decorators'
import store from '@/store'
import config from '@/config/defaultSettings'

export interface ISettingState {
  isMobile: boolean,
  theme: string,
  layout: string,
  fixedHeader: boolean,
  systemName: string,
  multipage: boolean
}

@Module({
  dynamic: true,
  namespaced: true,
  store,
  name: 'setting',
  preserveState: localStorage.getItem('vuex') !== null,
})
class Setting extends VuexModule implements ISettingState {

  public isMobile: boolean = false
  // 整体风格
  public theme: string = 'dark'
  // 导航设置
  public layout: string = 'head'
  // 固定头部
  public fixedHeader: boolean = true
  // 系统名称
  public systemName: string = config.title
  // 多页签模式
  public multipage: boolean = true

  get telephone() {
    return config.telephone
  }

  // 主题色
  public primaryColor = config.primaryColor

  /**
   * 设置当前设备
   *
   * @param {boolean} isMobile
   * @memberof Setting
   */
  @Mutation
  public setDevice(isMobile: boolean) {
    this.isMobile = isMobile
  }

  @Mutation
  public setTheme(theme: string) {
    this.theme = theme
  }

  @Mutation
  public setLayout(layout: string) {
    this.layout = layout
  }

  @Mutation
  public setMultipage(multipage: boolean) {
    this.multipage = multipage
  }

  @Mutation
  public setFixedHeader(fixedHeader: boolean) {
    this.fixedHeader = fixedHeader
  }

  @Mutation
  public ToggleColor(color: string) {
    this.primaryColor = color;
  }
}

export const settingModule = getModule(Setting)

export default Setting
